<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单管理 - 鲜时蔬商家中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--引入的vue.js-->
    <script src="../../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="../../css/index.css">
    <!--引入elementUI的js-->
    <script src="../../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../../js/axios.min.js"></script>

    <style>
        /* 品牌绿 */
        :root {
            --primary: #27ae60;
            --primary-dark: #219653;
        }

        body {
            background-color: #f8fafb;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        #app {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .page-header h1 {
            font-size: 26px;
            font-weight: 600;
            color: #333;
        }

        /* 订单卡片 */
        .order-card {
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
            transition: transform .25s, box-shadow .25s;
        }

        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
        }

        .order-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .order-info h3 {
            margin: 0 0 6px 0;
            font-size: 18px;
        }

        .order-info p {
            margin: 2px 0;
            font-size: 14px;
            color: #666;
        }

        /* 商品行 */
        .item-row {
            display: flex;
            align-items: center;
            padding: 14px 0;
            border-bottom: 1px solid #e8efe9;
            gap: 16px;
        }

        .item-row:last-child {
            border-bottom: none;
        }

        .item-info {
            flex: 2;
            min-width: 0;
        }

        .item-info strong {
            font-size: 15px;
        }

        .item-info p {
            font-size: 13px;
            color: #666;
            margin-top: 4px;
        }

        .item-price,
        .item-quantity,
        .item-status {
            flex: 1;
            text-align: center;
            font-size: 14px;
        }

        .item-price {
            font-weight: 600;
            color: var(--primary);
        }

        .item-actions {
            flex: 0 0 auto;
            text-align: right;
        }

        /* 空/错/加载 */
        .empty-state {
            text-align: center;
            padding: 60px 0;
        }

        .empty-state img {
            width: 200px;
            margin-bottom: 16px;
        }

        .error-state {
            text-align: center;
            padding: 60px 0;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .item-row {
                flex-wrap: wrap;
            }

            .item-info {
                flex: 1 1 100%;
            }

            .item-price,
            .item-quantity,
            .item-status {
                flex: 1 1 25%;
            }

            .item-actions {
                flex: 1 1 100%;
                margin-top: 8px;
                text-align: right;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页头 -->
    <div class="page-header">
        <h1>订单管理</h1>
        <el-button type="primary" size="mini" icon="el-icon-refresh" @click="fetchOrders">刷新</el-button>
    </div>

    <!-- 加载 -->
    <div v-if="loading" class="empty-state">
        <i class="el-icon-loading" style="font-size: 40px; color: var(--primary);"></i>
        <p>正在加载订单数据...</p>
    </div>

    <!-- 错误 -->
    <div v-if="error" class="error-state">
        <i class="el-icon-warning" style="font-size: 40px; color: #e74c3c;"></i>
        <p>{{ error }}</p>
        <el-button type="text" @click="fetchOrders">重新加载</el-button>
    </div>

    <!-- 空数据 -->
    <div v-if="!loading && !error && orders.length === 0" class="empty-state">
        <i class="el-icon-shopping-bag-2" style="font-size: 80px; color: #dcdfe6;"></i>
        <h3>暂无订单</h3>
        <p>当前没有客户购买您店铺的商品</p>
        <el-button type="text" @click="fetchOrders">再试一次</el-button>
    </div>

    <!-- 订单列表 -->
    <div v-if="!loading && !error && orders.length > 0">
        <el-card v-for="order in orders" :key="order.orderId" class="order-card">
            <div slot="header" class="order-header-row">
                <div class="order-info">
                    <h3>订单编号: {{ order.orderNo }}</h3>
                    <p>下单时间: {{ formatTime(order.createTime) }}</p>
                    <p>客户: {{ order.customerName || '--' }} · {{ order.customerPhone || '--' }}</p>
                </div>
                <el-tag :type="tagType(order.latestActno)" effect="dark" size="medium">
                    {{ getOrderStatusText(order.latestActno) }}
                </el-tag>
            </div>

            <div v-for="item in order.orderItems" :key="item.itemId" class="item-row">
                <div class="item-info">
                    <strong>{{ item.productName }}</strong>
                    <p>{{ item.productSpec || '默认规格' }}</p>
                </div>
                <div class="item-price">¥{{ item.amount.toFixed(2) }}</div>
                <div class="item-quantity">{{ item.orderQuantity }} {{ item.unit || '件' }}</div>
                <div class="item-status">
                    <el-tag :type="item.sortingStatus === '1' ? 'success' : 'warning'" size="mini">
                        {{ item.sortingStatus === '1' ? '已发货' : '未发货' }}
                    </el-tag>
                </div>
                <div class="item-actions">
                    <el-button
                            type="primary"
                            size="mini"
                            :disabled="item.sortingStatus === '1' || !item.itemId"
                            @click="shipItem(item.itemId)">
                        {{ item.sortingStatus === '1' ? '✔ 已发货' : '🚀 发货' }}
                    </el-button>
                </div>
            </div>
        </el-card>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: true,
                error: null,
                orders: []
            };
        },
        mounted() {
            this.fetchOrders();
        },
        methods: {
            getBaseUrl() {
                return window.location.pathname.startsWith('/vegetablemarketexpress') ? '/vegetablemarketexpress' : '';
            },
            getOrderStatusText(actno) {
                const map = {0: '待支付', 1: '已支付（待发货）', 2: '已发货（待接收）', 3: '已完成', 4: '已关闭', 5: '无效订单'};
                return map[actno] || '未知状态';
            },
            tagType(actno) {
                const map = {0: 'warning', 1: '', 2: 'success', 3: 'success', 4: 'info', 5: 'danger'};
                return map[actno] || 'info';
            },
            formatTime(time) {
                return time ? new Date(time).toLocaleString() : '--';
            },
            fetchOrders() {
                this.loading = true;
                this.error = null;
                const baseUrl = this.getBaseUrl();
                axios.get(baseUrl + '/order/getShopOrders', { withCredentials: true })
                    .then(res => {
                        if (res.data.code === 200) {
                            this.orders = res.data.data.orders || [];
                        } else {
                            this.error = '获取订单数据失败: ' + (res.data.message || '未知错误');
                        }
                    })
                    .catch(err => {
                        this.error = '网络错误: ' + err.message;
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            shipItem(itemId) {
                if (!itemId) return;
                this.$confirm('确认发货该商品吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const baseUrl = this.getBaseUrl();
                    return axios.post(baseUrl + '/order/shipItem/' + itemId, {}, { withCredentials: true });
                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message.success('🎉 发货成功');
                        this.fetchOrders(); // 刷新
                    } else {
                        this.$message.error('发货失败: ' + (res.data.message || '未知错误'));
                    }
                }).catch(() => {
                    // 取消
                });
            }
        }
    });
</script>
</body>
</html>